import React, { useEffect, useState } from 'react'
import axios from 'axios'
import Img from './assets/学校.jpg'
import { useNavigate } from 'react-router-dom'

export default function Xue() {
  const navigate = useNavigate()
  const [list, setList] = useState([])
  const [key, setkey] = useState('')
  const getList = async () => {
    const zhi = window.location.search.split('=')[1]
    const res = await axios.get(`http://localhost:3009/list`, { params: { zhi } })
    const shu = res.data.data.filter(item => item.type === zhi)
    setList(shu)
  }
  const zhu = (item) => {
    localStorage.setItem('name', item.name)
    localStorage.setItem('address', item.address)
    navigate('/index/home')
  }
  const find = () => {
    const newList = list.filter(item => {
      return item.name.includes(key)
    })
    setList(newList)
  }
  useEffect(() => {
    getList()
  }, [])
  return (
    <div>
      <h2 style={{ textAlign: 'center' }}>选择学习</h2>
      <input value={key} onChange={(e) => setkey(e.target.value)} type="text" placeholder='请输入学校名称搜索' style={{ width: '300px', height: "40px", border: '1px solid #A1D3C2', borderRadius: "50px", textAlign: 'center', marginLeft: '100px', marginTop: '20px' }} />
      <span onClick={() => { find() }}>搜索</span>
      {list.map((item, index) => {
        return (<div onClick={() => { zhu(item) }} style={{ display: 'flex', marginTop: "40px" }} key={index}>
          <img src={Img} width={120} height={110} alt="" />
          <div>
            <h3>{item.name}</h3>
            <p style={{ marginTop: "10px" }}>{item.address}</p>
          </div>
        </div>)
      })
      }
    </div>
  )
}